<template>
  <aside class="app-sidebar">
    <nav class="menu">
      <t-menu
        :active="activeMenu"
        mode="vertical"
      >
        <t-menu-item value="home">首页</t-menu-item>
        <t-menu-item value="dashboard">数据看板</t-menu-item>
        <t-menu-item value="profile">个人中心</t-menu-item>
      </t-menu>
    </nav>
  </aside>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Menu as TMenu, MenuItem as TMenuItem } from 'tdesign-vue-next'

const activeMenu = ref('home')


</script>

<style scoped lang="less">
.app-sidebar {
  width: 250px;
  height: calc(100vh - 64px);
  background-color: #fff;
  padding-top: 20px;
  
  .menu {
    padding: 0 10px;
  }
}
</style>
    